<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <title>欢迎使用DODOKE Cake后台管理系统</title>
    <meta name="keywords" content="HTML5 Bootstrap 3 Admin Template UI Theme" />
    <meta name="description" content="AbsoluteAdmin - A Responsive HTML5 Admin UI Framework">
    <meta name="author" content="AbsoluteAdmin">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="/assets/css/theme.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/admin-forms.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body class="external-page external-alt sb-l-c sb-r-c">
<div id="main" class="animated fadeIn">
    <section id="content_wrapper">
        <section id="content">
            <div class="admin-form theme-info mw500" id="login">
                <div class="content-header">
                    <h1> Love Cake</h1>
                    <p class="lead">欢迎使用ICake后台管理管理系统</p>
                </div>
                <div class="panel mt30 mb25">

                    <form>
                        <div class="panel-body bg-light p25 pb15">
                            <div class="section">
                                <label for="username" class="field-label text-muted fs18 mb10">账号</label>
                                <label for="username" class="field prepend-icon">
                                    <input type="text" class="gui-input" id="username" onblur="checkUser(this)" placeholder="请输入工号...">
                                    <label for="username" class="field-icon">
                                        <i class="fa fa-user"></i>
                                    </label>
                                </label>
                            </div>
                            <div class="section">
                                <label for="password" class="field-label text-muted fs18 mb10">密码</label>
                                <label for="password" class="field prepend-icon">
                                    <input type="password" class="gui-input" id="password" placeholder="请输入密码...">
                                    <label for="password" class="field-icon">
                                        <i class="fa fa-lock"></i>
                                    </label>
                                </label>
                            </div>
                        </div>

                        <div class="panel-footer clearfix">
                            <button type="button" class="button btn-primary mr10 pull-right" onclick="login()" >登陆</button>
                            <label class="switch ib switch-primary mt10">
                                <input type="checkbox" name="remember" id="remember" checked>
                                <label for="remember" data-on="是" data-off="否"></label>
                                <span>记住我</span>
                            </label>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </section>
</div>
</body>
<script type="text/javascript" src="../assets/static/js/jquery-3.5.1.js"></script>


<script>
    function checkUser(obj) {
        console.log(obj.value)
        // 发送请求到后端查看 用户的名称时候存入在即可
        $.ajax("/user/check", {
            type: "get",
            data: {
                username: obj.value,
            },
            dataType: "json",
            success: function (data, status, xhr) {
                console.log(data)
                // code 200 啥事都不干，
                if (data.code === 400) {
                    $("#username").empty()
                    alert("该用户名不存在")
                }
            }
        })
    }

    function login() {
        var username = $("#username").val()
        var password = $("#password").val()

        console.log(username, password)

        var jsonStr = JSON.stringify({
            username: username,
            password: password
        });

        $.ajax("/user/login2", {
            type: "post",
            data: jsonStr,
            dataType: "json",
            contentType: "application/json",
            success: function (data, status, xhr) {
                console.log(data)
                if (data.code === 200) {
                    window.location.href = "/view/catalog_list";
                } else if (data.code === 400) {
                    alert("账号用户名不匹配")
                }
            }
        })

    }
</script>
</html>